<template>
    <div class="interestCalculationDetailsPage">
        <div class="search-wrap d-flex a-center">

            <div class="search-item d-flex a-center m-l20">
                <label>债权方</label>
                <el-select class="m-l10" v-model="form.creditor" clearable>
                    <el-option v-for="(item,index) in companyList" :key="index" :label="item.companyName" :value="item.companyName"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>债务方</label>
                <el-select class="m-l10" v-model="form.debtor" clearable>
                    <el-option v-for="(item,index) in companyList" :key="index" :label="item.companyName" :value="item.companyName"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>借款时间</label>
                <el-date-picker
                        class="m-l10"
                        size="large"
                        v-model="form.valueTime"
                        @change="onChange"
                        value-format="YYYY-MM-DD"
                        type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                />
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button
                        class="button_edit"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
        ></public-table>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDivider,
    ElDatePicker
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {companyApi} from "@/api/businessFinance";

const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'companyApi.getBankLoanInterestTotal',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'exportApi.getBankLoanInterestTotalLeadingOut',
    tableName:'计息汇总表'
});
const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    creditor:'',
    debtor:'',
    startTime:'',
    endTime:'',
    valueTime:''
}

tableOption.value = [
    { label: "债权方 ", prop: "creditor" },
    { label: "债务方", prop: "debtor" },
    { label: "借款时间", prop: "loanTime" },
    { label: "借款金额", prop: "loanAmount" },
    { label: "利率", prop: "interestRate" },
    { label: "还款总金额", prop: "repaymentAmountCount" },
    { label: "计提利息总金额", prop: "interestAmountCount" },
    { label: "借款余额", prop: "loanBalance" },
];


const companyList = ref([]);
/**
 * 查公司列表
 */
const getCompanyList = () => {
    companyApi.getList({}).then(res=>{
        companyList.value = res.data;
    });
}


/**
 * 计提时间被选择时触发
 *
 */
const onChange = (e) => {
    if(e===null || (e instanceof Array && e.length===0)){
        form.value.startTime = '';
        form.value.endTime = '';
        return;
    }
    form.value.startTime = e[0];
    form.value.endTime = e[1];
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:10
    });
    getCompanyList();
});
</script>

<style lang="scss" scoped>
.interestCalculationDetailsPage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
